<template>
  <svgContainer 
  :component_infos="props.component_infos"
  :svg_data="props.svg_data"
  :svgCanvas="props.svgCanvas"
  :jsonName="jsonName"
  @handleBusiness="handleBusiness"
  >
  </svgContainer>
  <el-dialog
  v-model="dialogVisible"
  title="皮带健康状态"
  width="60%"
>
<health></health>
</el-dialog>
</template>

<script script setup lang="ts">
import svgContainer from '../../components/svgContainer.vue'
import health from './healthDialog.vue'
import {ISvgDataLists, ISvgCanvas, IComponentInfo, ISelectSvg} from "../../Model";
import {reactive,watch,ref,inject} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import Big from 'big.js';
const bus:any=inject('$bus')
const props = defineProps({
    //组件的json格式
    component_infos: {
        type: Array as () => Array<IComponentInfo>,
        required: true,
        default: []
    },
    //要渲染的数据
    svg_data: {
        type: Array as () => Array<ISvgDataLists>,
        required: true,
        default: []
    },
    svgCanvas: {
        type: Object as () => ISvgCanvas,
        default: { width: 1520, height: 720 }
    },
    jsonName:{
      type: String,
      default:'test' 
    }
});
const options = {
      clean: true, // true: 清除会话, false: 保留会话
      connectTimeout: 4000, // 超时时间
      // 认证信息
      clientId: '风机房',
      username: 'emqx_test',
      password: 'emqx_test',
}

const MTOption ={
      clean: true, // true: 清除会话, false: 保留会话
      connectTimeout: 10000, // 超时时间
      // 认证信息
      clientId: '皮带主运输',
      username: '',
      password: '',
}

const connectUrl = 'ws://180.76.99.51:8083/mqtt'
const MTurl='ws://10.134.232.13:8083/mqtt'
const client = mqtt.connect(MTurl, MTOption)
  // 重连
client.on('reconnect', () => {
      console.log('reconnect')
    });
    // 错误
client.on('error', (err) => {
      console.log('Connection error!')
      console.log('错误信息' + err)
    });
client.on("connect",function (connack) {
     console.log('Mqtt Connection succeeded!')
});
 client.subscribe(['web/5101','web/5102','web/5103','web/5104','web/5105','web/5106','web/5107','web/5108','web/5109','web/5113','web/5114'],{qos:0},error => {
        if (!error) 
          console.log('success~')
        else 
          console.log('fail')
        
      });
client.on('message', (topic, message, packet) => {
    var data = JSON.parse(message.toString());
  console.log('topic', topic, 'message',JSON.parse(message.toString()));
    // VARS['ventilationData'] = JSON.parse(message.toString());
})
const dialogVisible=ref(false)
//获取业务要用到的对应的SVG
const  mtcData=reactive({
    conveyorList:props.svg_data.filter(f=>f.type==='conveyor'),//获取到所有的皮带
    mtList:props.svg_data.filter(e=>e.title==='煤炭-clock'),//获取到所有的煤炭
    mtList1:props.svg_data.filter(e=>e.title==='煤炭-clock1')//获取到所有的煤炭
})
const pdType=ref(0)//全局皮带状态，0-关闭,1-顺煤开启中，2-逆煤开启中
const clockTimerList=reactive([])//顺煤流定时器 1
const mtInitPosition={
  x1:-2,
  y1:108,
  x2:516,
  y2:94}//煤炭初始位置

const translateList=['x_80','x_55_y_22','x_80','x_55_y_22','x_80','x_55_y_22','x_80','x_55_y_22',
'x_80','x_65_y_30','','true','x_65_y_30','x_80','x_55_y_22','x_80','x_30_y_10','','true','x_70_y_80','x_-80_y_5',
'x_-55_y_10','x_-55_y_10','x_-60_y_60','x_-80']
const translateList1=['x_80','x_55_y_22','x_80','x_55_y_22','x_80','x_55_y_140','x_50_y_30','',
'true','x_70_y_80','x_-80_y_5','x_-20_y_10','x_40_y_55','x_80']
const translate=(coal,List:Array<string>)=>{
  let count=0
  if(coal){
    coal.extend_attr.showFlag.val=true
  clockTimerList.push(
      setInterval(()=>{
        let arr=[]
        if(count===26){
        coal.extend_attr.showFlag.val=true
        count=0
      }
      if(count===25)
      {
        coal.extend_attr.showFlag.val=false
        coal.svgPositionX=mtInitPosition.x1
        coal.svgPositionY=mtInitPosition.y1
      }
      if(count<=24)
      {
        arr=List[count]?.split('_')
      if(arr.length===2){//只有x
          coal.svgPositionX+=parseInt(arr[1])
        }
        else if(arr.length===4)//x和y
        {
          coal.svgPositionX+=parseInt(arr[1])
          coal.svgPositionY+=parseInt(arr[3])
        }
        else{
          coal.extend_attr.showFlag.val=Boolean(arr[0])
        }
      }
      
      count++
      },1000))
  }
  
  
}
const translate1=(coal,List:Array<string>)=>{
  let count=0
  if(coal){
    coal.extend_attr.showFlag.val=true
  clockTimerList.push(
      setInterval(()=>{
        let arr=[]
        if(count===15){
        coal.extend_attr.showFlag.val=true
        count=0
      }
      if(count===14)
      {
        coal.extend_attr.showFlag.val=false
        coal.svgPositionX=mtInitPosition.x2
        coal.svgPositionY=mtInitPosition.y2
      }
      if(count<=13)
      {
        arr=List[count].split('_')
        if(arr.length===2){//只有x
          coal.svgPositionX+=parseInt(arr[1])
        }
        else if(arr.length===4)//x和y
        {
          coal.svgPositionX+=parseInt(arr[1])
          coal.svgPositionY+=parseInt(arr[3])
        }
        else{
          coal.extend_attr.showFlag.val=Boolean(arr[0])
        }
      }
        
      count++
      },1000))
  }
  
  
}
const handleBusiness=data=>{
  const {page, title}=data
    if(title==='health')
    {
      dialogVisible.value=true
    }
    else if(title==='顺煤流启动')
    {
      if(pdType.value!==0){
              ElMessage({
        type: 'error',
        message: '皮带已经启动，请先关闭！',
      })
      }
      else{
              ElMessageBox.confirm(
    '确定要以顺煤流启动皮带吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        mtcData.conveyorList.forEach(e => {
                e.extend_attr.fill_color.front_val="#31A2DC"
                e.extend_attr.fill_color.back_val="#3d8bf6"
                e.extend_attr.fill_color.up_val="#00fffc"
                e.extend_attr.fill_color.up_val1="#3d8bf6"
                e.extend_attr.class.val1="svg_rotate_360"
                e.extend_attr.class.val2="transColor"
                e.extend_attr.class.val3="transColor1"
        });
        
        let count=0
        let count1=0
        let timer=setInterval(()=>{
          if(count==13)
          clearInterval(timer)
          else
          {
            translate(mtcData.mtList[count],translateList)
          }
          
          count++
        },2000)
        let timer1=setInterval(()=>{
          if(count1==7)
          clearInterval(timer1)
          else
          translate1(mtcData.mtList1[count1],translateList1)
          count1++
        },2000)
            

      pdType.value=1
      ElMessage({
        type: 'success',
        message: '顺煤启动成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '顺煤启动失败！',
      })
    })
      }
  
        
    }
    else if(title==='逆煤流启动')
    {
      if(pdType.value!==0){
              ElMessage({
        type: 'error',
        message: '皮带已经启动，请先关闭！',
      })
      }
      else{
              ElMessageBox.confirm(
    '确定要以逆煤流启动皮带吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        mtcData.conveyorList.forEach(e => {
                e.extend_attr.fill_color.front_val="#31A2DC"
                e.extend_attr.fill_color.back_val="#3d8bf6"
                e.extend_attr.fill_color.up_val="#00fffc"
                e.extend_attr.fill_color.up_val1="#3d8bf6"
                e.extend_attr.class.val1="svg_rotate_360_reverse"
                e.extend_attr.class.val2="transColor1"
                e.extend_attr.class.val3="transColor"
        });
        pdType.value=2 
      ElMessage({
        type: 'success',
        message: '逆煤流启动成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '逆煤流启动失败！',
      })
    })
      }     
    }
    else if(title==='顺煤流停止')
    {
      if(pdType.value===0||pdType.value===2){
              ElMessage({
        type: 'error',
        message: '请确认皮带已经启动并处于顺煤流！',
      })
      }
      else{
        mtcData.conveyorList.forEach(e => {
                e.extend_attr.fill_color.front_val="#7E7E7E"
                e.extend_attr.fill_color.back_val="#272B4C"
                e.extend_attr.fill_color.up_val="#B5B5B5"
                e.extend_attr.fill_color.up_val1="#272B4C"
                e.extend_attr.class.val1=""
                e.extend_attr.class.val2=""
                e.extend_attr.class.val3=""

    })
            pdType.value=0
        if(clockTimerList.length){
         clockTimerList.forEach(e => {
              clearInterval(e)
                 });
                }
       mtcData.mtList.forEach(e=>{
                  e.extend_attr.showFlag.val=false
                  e.svgPositionX=mtInitPosition.x1
                  e.svgPositionY=mtInitPosition.y1
      })
       mtcData.mtList1.forEach(e=>{
                  e.extend_attr.showFlag.val=false
                  e.svgPositionX=mtInitPosition.x2
                  e.svgPositionY=mtInitPosition.y2
      })
      ElMessage({
        type: 'info',
        message: '顺煤流停止！',
      })
      }     
    }
    else if(title==='逆煤流停止')
    {
      if(pdType.value===0||pdType.value===1){
              ElMessage({
        type: 'error',
        message: '请确认皮带已经启动并处于逆煤流！',
      })
      }
      else{
        mtcData.conveyorList.forEach(e => {
                e.extend_attr.fill_color.front_val="#7E7E7E"
                e.extend_attr.fill_color.back_val="#272B4C"
                e.extend_attr.fill_color.up_val="#B5B5B5"
                e.extend_attr.fill_color.up_val1="#272B4C"
                e.extend_attr.class.val1=""
                e.extend_attr.class.val2=""
                e.extend_attr.class.val3=""

    })
      pdType.value=0
      ElMessage({
        type: 'info',
        message: '逆煤流停止！',
      })
      }     
    }
  }
</script>